<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>地址解析</title>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            margin-top:10px;
            overflow:hidden;
        }
        input#address{
            width:300px;
        }
        #container {
            min-width:603px;
            min-height:767px;
        }


        .hearder{
            position: fixed;
            z-index: 9999;
            width: 500px;
            height: 300px;
        }

        .hearder input{
            float: left;
            margin-right: 10px;
        }

        .hearder button{
            float: right;
        }

        .footer{
            position: fixed;
            z-index: 9999;
            width: 200px;
            height: 300px;
            margin-top: 40px;
        }

    </style>
    <link rel="stylesheet" href="../bs/css/bootstrap.min.css">
    <script src="../bs/js/jquery.js"></script>
    <script src="../bs/js/bootstrap.min.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=BMGBZ-QN53J-D6QF7-FJDLC-6YRYV-M5FIM"></script>
    <script>
        var geocoder,map,marker = null;
        var init = function() {
            var center = new qq.maps.LatLng(39.916527,116.397128);
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 15
            });
            //调用地址解析类
            geocoder = new qq.maps.Geocoder({
                complete : function(result){
                    $('#lat').val(result.detail.location.lat);
                    $('#lng').val(result.detail.location.lng);
                    map.setCenter(result.detail.location);
                    var marker = new qq.maps.Marker({
                        map:map,
                        position: result.detail.location
                    });
                }
            });
        }


        function codeAddress() {
            var address = document.getElementById("address").value;
            $('input[name=address]').val(address);
            geocoder.getLocation(address);
        }
    </script>
</head>
<body onload="init()">
<div class="container">
    <div class="hearder">
        <!--安徽省合肥市高新区云飞路6号-->
        <input id="address" type="textbox" value="" class="form-control" placeholder="请输入地址获取经纬度">
        <buton onclick="codeAddress()" class="btn btn-default btn-info" >获取经纬度</buton>
    </div>
    <div class="footer">
        <form id="form">
            <div class="form-group">
                <input type="text" class="form-control" id="lat" name="lat" value="" placeholder="纬度" readonly>
            </div>
            <div class="form-group">
                <input type="hidden" name="address" value="">
                <input type="hidden" name="ids" value="{$id}">
                <input type="hidden" name="type" value="">
                <input type="text" class="form-control" id="lng" name="lng" value="" placeholder="经度" readonly>
            </div>
            <button type="button"  onclick="send()" class="btn btn-default">确认经纬度</button>
        </form>
    </div>
</div>
<div id="container"></div>
</body>
<script>
    function send() {
        $.ajax({
            type:'GET',
            url:"/admin/goods/goods/updateAddress",
            data:$('#form').serialize(),
            dataType:'json',
            success:function(json){
                if(json.code == 1){
                    location.href = '/admin/goods/goods/edit?dialog=1&ids=' + $('input[name=ids]').val();
                }
            }
        })

    }
</script>


</html>